<template>
    <div class="panel full-panel muti-panel">
        <Chat v-show="data.current===chat" :route="route" v-for="chat in data.comps"></Chat>
    </div>
</template>

<script setup>
import { reactive, onUnmounted } from 'vue';
import { useRoute, onBeforeRouteUpdate } from 'vue-router'
import { createRouteName } from '@frontend/views/public/publicMethods.js'
import $eventer from '@events'
import { CHAT } from '@frontend/routers/routeConf'

import Chat from './chat.vue'
let route = useRoute()
const firstName = createRouteName(route)
const data = reactive({
    current: firstName,
    comps: [firstName]
})
const routeChange = ($r)=>{
    const name = createRouteName($r)
    if(name.indexOf(CHAT + '-')===0){
        initSubRoute($r)
    }
}
// 当路由改变时判断是否为chat路由，则触发当前chat变化
$eventer.$on('route-change', routeChange)
onUnmounted(()=>{
    $eventer.$off('route-change', routeChange)
})
const initSubRoute = (to)=>{
    const tag = createRouteName( to || route )
    if( data.comps.indexOf(tag) >= 0){
        data.current = data.comps[data.comps.indexOf(tag)]
    }else{
        data.comps.push(tag)
        data.current = tag
    }
}
</script>